import React, { Component } from 'react';
import {Row, Col, Input, Upload, message, Switch, Button} from 'antd';
import 'antd/dist/antd.css';
import { getUserLevelData } from '../../api';
import Progressese from '../../common/progress';
import Header from '../../common/header';
import Footer from '../../common/footer';
import AboutPri from './aboutPri'
import { TagOutlined } from '@ant-design/icons';

// 转积分为百分比
function transScore(growthlevel) {
    let y,x,lv;
    if(0<=growthlevel&growthlevel<600){
        y=600;
        x=0;
        lv=0;
    }else if(600<=growthlevel&growthlevel<1800){
        y=1800;
        x=600;
        lv=1;
    }else if(1800<=growthlevel&growthlevel<3600){
        y=3600;
        x=1800;
        lv=2;
    }else if(3600<=growthlevel&growthlevel<6000){
        y=6000;
        x=3600;
        lv=3;
    }
    else if(6000<=growthlevel&growthlevel<9000){
        y=9000;
        x=6000;
        lv=4;
    }
    else if(9000<=growthlevel&growthlevel<15000){
        y=15000;
        x=9000;
        lv=5;
    }
    else if(15000<=growthlevel&growthlevel<16800){
        y=16800;
        x=15000;
        lv=6;
    }
    let width=(1-(y-growthlevel)/(y-x))*100*(1/7)+lv*(1/7)*100;
    console.log(width)
    return width;

}

function transPrivilege(growthlevel) {
    let privilege;
    if(0<=growthlevel&growthlevel<600){
       privilege=['内容特权'];
    }
    else if(600<=growthlevel&growthlevel<1800){
        privilege=['内容特权'];
    }
    else if(1800<=growthlevel&growthlevel<3600){
        privilege=['内容特权','流量特权'];
    }
    else if(3600<=growthlevel&growthlevel<6000){
        privilege=['内容特权','流量特权'];
    }
    else if(6000<=growthlevel&growthlevel<9000){
        privilege=['内容特权','流量特权','炫铃特权'];
    }
    else if(9000<=growthlevel&growthlevel<15000){
        privilege=['内容特权','流量特权','炫铃特权'];
    }
    else if(15000<=growthlevel&growthlevel<16800){
        privilege=['内容特权','流量特权','炫铃特权','明星特权'];
    }
    console.log(privilege);
    return privilege;
}

class UserLevel extends Component {
    constructor(props){
        super(props);
        this.state={
          levelData:0
        }
    };
    componentDidMount() {
        this.id = JSON.parse(localStorage.getItem("loginObj")).userId;
        //获取用户设置信息
        getUserLevelData(this.id).then( (res)=>{
            if(res.data.code===200) {
                this.setState({
                    levelData:res.data.score
                })
            }
            else{ console.log("请求数据错误")}
        })
    }

    render(){
        console.log(this.state.levelData)
        const score = this.state.levelData;
        const growlevel=transScore(score);
        const privilege = transPrivilege(score).length>0? transPrivilege(score).map( (item,index)=>{
            return(
                <div style={{ marginTop:"7px"}}>
                    <TagOutlined />
                    <span style={{ marginLeft:"8px"}}>{item}</span>
                </div>

            )
        }):null

        return(
            <div className='userLevel'>
                <div className="userLevel-header" style={{ backgroundColor:"#242400",color:"#fff",position:"fixed",zIndex:10,top:"0",width:"100%" }}><Header /></div>
                <div className='userLevel-content' style={{ marginTop:"15vh",backgroundColor:"#fff",minWidth:"1200px" }}>
                    <Row>
                        <Col span={5}></Col>
                        <Col span={16} style={{ backgroundColor:"#fff",padding:"30px",borderTop:"none"  }}>
                            <Row gutter={10}>
                                <Col span={25}>
                                    <div style={{ fontSize:"20px",width:"600px",height:"60px",marginTop:"10px" }}>
                                        当前积分：{score}
                                    </div>
                                    <div style={{ height:"100px"}}>
                                        <Progressese  default={growlevel}/>
                                    </div>
                                    <div style={{ fontSize:"20px",width:"600px",height:"50px",marginTop:"10px" }}>
                                        当前等级特权：
                                    </div>
                                    <div>
                                        <span> {privilege}</span>
                                    </div>
                                    <div style={{ marginTop:"70px",fontSize:"15px"}}>
                                        <AboutPri/>
                                    </div>
                                </Col>
                            </Row>
                        </Col>
                        <Col span={4}></Col>
                    </Row>
                </div>
                <div className='userLevel-footer'>
                    <Footer />
                </div>
            </div>
        )
    }

}
export default UserLevel
